<template>
<div class="footer">
    <div class="footer-wrp">
    <div class="border"></div> 
    <div class="footer-cnt clearfix">
        <ul class="boston-postcards">
            <li>
                <div class="tips">bilibili</div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/aboutUs.html">关于我们</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/friends-links.html">友情链接</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//bmall.bilibili.com/#!/">哔哩哔哩周边</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/contact.html">联系我们</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/join.html">加入我们</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="https://account.bilibili.com/site/ident.html">官方认证</a>
                </div>
            </li> 
            <li>
                <div class="tips">传送门</div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/help.html">帮助中心</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/video/av120040/">高级弹幕</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/event">活动专题页</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//www.bilibili.com/html/copyright.html">侵权申诉</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="https://account.bilibili.com/answer/addq">分院帽计划</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="//activity.bilibili.com/">活动中心</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="http://link.acg.tv">用户反馈论坛</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="http://h.bilibili.com/wallpaper?action=list">壁纸站</a>
                </div> 
                <div class="cards">
                    <a target="_blank" href="http://www.bilibili.com/html/cele.html">名人堂</a>
                </div>
            </li> 
            <li>
                <div class="block right">
                    <a target="_blank" href="//app.bilibili.com/">
                        <div class="phone">
                            <div class="pic"></div> 
                            <em>手机端下载</em> 
                            <div class="qrcode-box-wrp">
                                <div class="qrcode-box qrcode-app">
                                    <div class="qrcode-box-arrow"></div>
                                </div>
                            </div>
                        </div>
                    </a> 
                    <a target="_blank" href="http://weibo.com/bilibiliweb">
                        <div class="weibo">
                            <div class="pic"></div> 
                            <em>新浪微博</em> 
                            <div class="qrcode-box-wrp">
                                <div class="qrcode-box qrcode-weibo">
                                    <div class="qrcode-box-arrow"></div>
                                </div>
                            </div>
                        </div>
                    </a> 
                    <a id="weixin">
                        <div class="weixin">
                            <div class="pic"></div> 
                            <em>官方微信</em> 
                            <div class="qrcode-box-wrp bigvip-qrcode">
                                <div class="qrcode-box qrcode-weixin">
                                    <div class="qrcode-box-arrow"></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </li>
        </ul> 
        <div class="partner">
            <div class="block left" style="padding-top: 0px;">
                <div class="partner-banner"></div>
            </div>
            <div class="block left" style="margin: 0px 68px 0px 115px; line-height: 24px; float: none;">
                <div class="isShowDomain">
                    <p>广播电视节目制作经营许可证：<span>（沪）字第1248号 </span> | 网络文化经营许可证：<span>沪网文[2013]0480-056号</span> |
                        信息网络传播视听节目许可证：<span>0910417</span>互联网ICP备案：<span>沪ICP备13002172号-3</span> 沪ICP证：<span>沪B2-20100043</span>
                        | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233 转 3</p>
                    <p>网上有害信息举报专区：
                        <a href="http://www.12377.cn/?spm=a2hww.20023042.0.0" target="_blank"><img
                                src="//static.hdslb.com/images/12377.png" width="16" height="16" style="vertical-align: sub;">
                            中国互联网违法和不良信息举报中心</a> | <a href="http://www.shjbzx.cn" target="_blank"><i
                                class="icons-footer icons-footer-report"></i><span> 上海互联网举报中心</span></a> | <a
                            href="http://jb.ccm.gov.cn/" target="_blank">12318 全国文化市场举报网站</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

  
</template>

<script>
export default {
    name: "Footer",
}
</script>

<style>
.footer {
    width: 100%;
    height: 262px;
    color: #99a2aa;
    font-size: 14px;
    line-height: 14px
}
.footer a {
    color: #222
}

.footer .footer-wrp {
    height: 222px;
    background-color: #f4f5f7;
    padding-bottom: 40px
}

.footer .border {
    width: 980px;
    height: 1px;
    margin: 0 auto 30px;
    border-top: 1px solid #e5e9ef
}

.footer-cnt {
    width: 1160px;
    height: 222px;
    margin: 0 auto
}

.footer-cnt ul {
    width: 100%;
    height: 112px;
    margin-bottom: 30px
}

.boston-postcards li {
    float: left;
    width: 360px;
    height: 122px;
    padding: 0 40px 0 39px;
    border-left: 1px solid #e5e9ef
}

.boston-postcards li:first-child {
    width: 360px;
    padding-right: 40px;
    padding-left: 0;
    border: 0
}

.boston-postcards li:last-child {
    width: 280px;
    padding-left: 39px;
    padding-right: 0
}

.boston-postcards .tips {
    margin-bottom: 22px
}

.boston-postcards .cards {
    float: left;
    width: 120px;
    margin-bottom: 16px;
    color: #222
}

.boston-postcards .right {
    width: 280px;
    height: 80px
}

.boston-postcards .right>a>div {
    float: left;
    width: 82px;
    height: 80px;
    text-align: center
}

.boston-postcards .right>a>div .pic {
    width: 60px;
    height: 60px;
    margin-left: 11px;
    margin-bottom: 3px
}

.boston-postcards .right .phone .pic {
    margin-left: 11px;
    background: url(../../assets/images/icons.png) no-repeat -1026px -196px
}

.boston-postcards .right .weibo .pic {
    background: url(../../assets/images/icons.png) no-repeat -1026px -323px
}

.boston-postcards .right .weixin .pic {
    background: url(../../assets/images/icons.png) no-repeat -1026px -68px
}

.boston-postcards a:hover {
    color: #00a1d6
}

.boston-postcards .right>a>div .pic:hover {
    color: #00a1d6;
    background-position-x: -1092px
}

.partner {
    width: 1160px;
    height: 80px;
    font-size: 12px
}

.partner-banner {
    width: 100px;
    height: 80px;
    background: url(../../assets/images/footpic.png) no-repeat
}

.partner a {
    color: #99a2aa
}

.partner a:hover {
    color: #222
}
</style>